<template>
  <div class="content">
    <el-button
        type="primary"
        @click="dialogVisible = true"
        style="margin-left: 30px; margin-bottom: 10px"
    >
      <i class="el-icon-circle-plus-outline"></i>
      增加用户
    </el-button>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.idCard.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="入职时间" prop="birthday"> </el-table-column>
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="性别" prop="sex"> </el-table-column>
      <el-table-column label="手机号" prop="phone"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="{}">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="工作人员信息" :visible.sync="dialogVisible" width="45%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="id">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="tel">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="入职日期" required>
          <el-col :span="9">
            <el-form-item prop="enter">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.hireDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="生日" required>
          <el-col :span="9">
            <el-form-item prop="leave">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
          >录入信息</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入老人姓名", trigger: "blur" },
          { min: 2, max: 7, message: "长度为 2 到 7 个汉字", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择老人性别", trigger: "change" }],
        id: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "身份证格式不正确", trigger: "blur" },
        ],
        tel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "电话号码格式不正确", trigger: "blur" },
        ],
        roomID: [
          { required: true, message: "请选择入住房间", trigger: "change" },
        ],
        enter: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        entertime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        leave: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        leavetime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
      ruleForm: {
        name: "",
        idCard: "",
        sex: "",
        phone: "",
        birthday: "",
        hireDate: "",
      },
      tableData: [
        {
          name: "zdz",
          idCard: "413254861206479513",
          sex: "男",
          phone: "13764213058",
          birthday: "2001-10-01",
          hireDate: "2022-07-07",
        },
        {
          name: "zdz",
          idCard: "413254861206479513",
          sex: "男",
          phone: "13764213058",
          birthday: "2001-10-01",
          hireDate: "2022-07-07",
        },
        {
          name: "zdz",
          idCard: "413254861206479513",
          sex: "男",
          phone: "13764213058",
          birthday: "2001-10-01",
          hireDate: "2022-07-07",
        },
        {
          name: "zdz",
          idCard: "413254861206479513",
          sex: "男",
          phone: "13764213058",
          birthday: "2001-10-01",
          hireDate: "2022-07-07",
        },
      ],
      search: "",
    };
  },
  created() {
    this.getUsersInfo();
  },
  methods: {
    getUsersInfo() {
      var that = this;
      this.$axios
        .get("http://zzay0132.mynatapp.cc/employee/getAll")
        .then((response)=> {
          that.response = response.data;
          this.tableData = response.data.data.info;
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.ruleForm.name = row.name;
      this.ruleForm.idCard = row.idCard;
      this.ruleForm.sex = row.sex;
      this.ruleForm.phone = row.phone;
      this.ruleForm.birthday = row.birthday;
      this.ruleForm.hireDate = row.hireDate;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post("http://localhost:8443/employee/update", this.ruleForm)
            .then(function (response) {
              that.response = response.data();
              alert(response.data.msg);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleDelete(index, row) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post("http://localhost:8443/employee/delete", {
              name: row.name,
              idCard: row.idCard,
              sex: row.sex,
              phone: row.phone,
              birthday: row.birthday,
              checkInDate: row.enter,
            })
            .then(function (response) {
              that.response = response.data();
              alert(response.data.msg);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post(" http://localhost:9662/employee/add", this.ruleForm)
            .then((response) => {
              that.response = response.data;
              alert(that.response.msg);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.ruleForm.name = "";
      this.ruleForm.idCard = "";
      this.ruleForm.sex = "";
      this.ruleForm.phone = "";
      this.ruleForm.birthday = "";
      this.ruleForm.checkInDate = "";
    },
  },
};
</script>
